import React, { useEffect, useMemo, useState } from 'react';

import {
  Card,
  Table,
  Input,
  Button,
  Space,
  Pagination,
  Dialog,
  MessagePlugin,
} from 'tdesign-react';
import { getApprovedDrivers, updateDriver, deleteDriver } from 'services/driver';

// 司机列表数据类型
interface Driver {
  id: number | string;
  driverName: string;
  phone: string;
  idNumber: string;
  licenseNumber?: string;
  auditStatus: 'pending' | 'approved' | 'rejected';
  vehicleType: string;
  vehicleLength: number;
  vehicleWidth: number;
  vehicleHeight: number;
  vehicleWeight: number;
  maxWeight: number;
  maxHeight: number;
  vehicleNumber: string;
  location: string;
  loadingMethod: string;
  vehicleRequirement: string;
  plateNumber: string;
  registerDate: string;
  carType: string;
  axleCount: string;
  idCardFront: string;
  idCardBack: string;
  licenseFront: string;
  licenseBack: string;
  vehicleLicenseFront: string;
  vehicleLicenseBack: string;
  vehiclePhoto: string;
}

const DriverListPage: React.FC = () => {
  // 状态管理
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(20);
  const [searchValue, setSearchValue] = useState('');
  const [phoneSearchValue, setPhoneSearchValue] = useState('');
  const [licenseSearchValue, setLicenseSearchValue] = useState('');
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);

  // 图片查看弹窗状态
  const [imageDialogVisible, setImageDialogVisible] = useState(false);
  const [currentImage, setCurrentImage] = useState({ src: '', title: '' });

  // 默认图片路径
  const defaultPhotoUrl = '/images/default-photo.jpg';

  // 查看详情弹窗
  const [detailDialogVisible, setDetailDialogVisible] = useState(false);
  const [currentDetailRow, setCurrentDetailRow] = useState<Driver | null>(null);

  const openDetail = (row: Driver) => {
    setCurrentDetailRow(row);
    setDetailDialogVisible(true);
  };

  const closeDetail = () => {
    setDetailDialogVisible(false);
    setCurrentDetailRow(null);
  };

  // 编辑弹窗状态与表单
  const [editDialogVisible, setEditDialogVisible] = useState(false);
  const [currentEditRow, setCurrentEditRow] = useState<Driver | null>(null);
  const [editForm, setEditForm] = useState({
    driverName: '',
    phone: '',
    idNumber: '',
    licenseNumber: '',
    vehicleLicenseNumber: '',
    plateNumber: '',
    vehicleType: '',
    vehicleLength: '',
    vehicleWidth: '',
    vehicleHeight: '',
    vehicleWeight: '',
    maxWeight: '',
    maxHeight: '',
    vehicleNumber: '',
    location: '',
    loadingMethod: '',
    vehicleRequirement: '',
  });

  const openEdit = (row: Driver) => {
    setCurrentEditRow(row);
    setEditForm({
      driverName: row.driverName || '',
      phone: row.phone || '',
      idNumber: row.idNumber || '',
      licenseNumber: row.idNumber || '', // 暂用身份证号模拟
      vehicleLicenseNumber: row.idNumber || '', // 暂无字段，先占位
      plateNumber: row.plateNumber || '',
      vehicleType: row.vehicleType || '',
      vehicleLength: String(row.vehicleLength ?? ''),
      vehicleWidth: String(row.vehicleWidth ?? ''),
      vehicleHeight: String(row.vehicleHeight ?? ''),
      vehicleWeight: String(row.vehicleWeight ?? ''),
      maxWeight: String(row.maxWeight ?? ''),
      maxHeight: String(row.maxHeight ?? ''),
      vehicleNumber: row.vehicleNumber || '',
      location: row.location || '',
      loadingMethod: row.loadingMethod || '',
      vehicleRequirement: row.vehicleRequirement || '',
    });
    setEditDialogVisible(true);
  };

  const handleEditChange = (key: keyof typeof editForm, val: string) => {
    setEditForm(prev => ({ ...prev, [key]: val }));
  };

  const handleEditCancel = () => {
    setEditDialogVisible(false);
    setCurrentEditRow(null);
  };

  const handleEditConfirm = async () => {
    if (!currentEditRow) return;
    try {
      setLoading(true);
      const num = (v: string) => {
        const n = parseFloat(v as any);
        return Number.isFinite(n) ? n : undefined;
      };
      await updateDriver(String(currentEditRow.id), {
        // 司机基本信息
        driver_name: editForm.driverName || undefined,
        driver_phone: editForm.phone || undefined,
        // 车辆基本信息
        car_plate: editForm.plateNumber || undefined,
        driving_license_car_type: editForm.vehicleType || undefined,
        // 车辆尺寸信息
        driving_license_car_length: num(editForm.vehicleLength as any),
        driving_license_car_width: num(editForm.vehicleWidth as any),
        driving_license_car_height: num(editForm.vehicleHeight as any),
        // 载重信息
        driving_license_max_load: num(editForm.vehicleWeight as any),
        driving_license_max_volume: num(editForm.maxWeight as any),
        driving_license_max_height: num(editForm.maxHeight as any),
        // 车辆配置信息
        driving_license_vehicle_axles: editForm.vehicleNumber || undefined,
        driving_license_forbidden_area: editForm.location || undefined,
        driving_license_loading_method: editForm.loadingMethod || undefined,
        driving_license_vehicle_requirements: editForm.vehicleRequirement || undefined,
      });
      MessagePlugin.success('司机信息已更新');
      setEditDialogVisible(false);
      setCurrentEditRow(null);
      // 刷新当前页数据，保留最近查询
      await fetchApproved(currentPage, pageSize);
    } catch (e: any) {
      MessagePlugin.error(e?.message || '更新失败');
    } finally {
      setLoading(false);
    }
  };

  // 处理图片查看
  const handleImageView = (src: string, title: string) => {
    setCurrentImage({ src: src || defaultPhotoUrl, title });
    setImageDialogVisible(true);
  };

  // 图片组件，处理默认图片
  const PhotoThumbnail: React.FC<{ src: string; alt: string }> = ({ src, alt }) => (
    <img
      src={src || defaultPhotoUrl}
      alt={alt}
      style={{
        width: '40px',
        height: '24px',
        borderRadius: '4px',
        border: '1px solid #e7e7e7',
        objectFit: 'cover'
      }}
      onError={(e) => {
        const target = e.target as HTMLImageElement;
        target.src = defaultPhotoUrl;
      }}
    />
  );

  // 数据源
  const [data, setData] = useState<Driver[]>([]);

  // 组合搜索关键词（输入框值 -> 拼接空格）。lastQuery 保存最近一次提交的查询（用于分页）
  const combinedSearch = useMemo(() => {
    const parts = [searchValue, phoneSearchValue, licenseSearchValue].map((s) => s?.trim()).filter(Boolean);
    return parts.join(' ');
  }, [searchValue, phoneSearchValue, licenseSearchValue]);
  const [lastQuery, setLastQuery] = useState<string>('');

  // 静态资源前缀处理（/static 开头补域名）
  const withStaticPrefix = (p?: string) =>
    p && typeof p === 'string' && p.startsWith('/static') ? `http://8.134.238.83:8000${p}` : p || '';

  // 拉取已通过司机列表
  const fetchApproved = async (page = currentPage, size = pageSize, searchStr?: string) => {
    setLoading(true);
    try {
      const res = await getApprovedDrivers({
        page,
        page_size: size,
        search: (searchStr ?? lastQuery) || undefined,
        sort_by: 'created_at',
        sort_order: 'desc',
      });
      // 兼容：utils/request 拦截器可能返回已解包的数据体或 AxiosResponse<T>
      const body: any = (res as any)?.data ?? res;
      const items = body?.data?.items ?? body?.items ?? [];
      const mapped: Driver[] = items.map((item: any, idx: number) => ({
        id: item.id || idx,
        driverName: item.driver_name || '',
        phone: item.driver_phone || '',
        idNumber: item.id_card_number || '',
        licenseNumber: item.driver_license_number || '',
        auditStatus: item.check_status === '3' ? 'approved' : item.check_status === '2' ? 'rejected' : 'pending',
        vehicleType: item.driving_license_car_type || '',
        vehicleLength: item.driving_license_car_length ?? 0,
        vehicleWidth: item.driving_license_car_width ?? 0,
        vehicleHeight: item.driving_license_car_height ?? 0,
        vehicleWeight: item.driving_license_max_load ?? 0,
        maxWeight: item.driving_license_max_volume ?? 0,
        maxHeight: item.driving_license_max_height ?? 0,
        vehicleNumber: item.driving_license_vehicle_axles || '',
        location: item.driving_license_forbidden_area || '',
        loadingMethod: item.driving_license_loading_method || '',
        vehicleRequirement: item.driving_license_vehicle_requirements || '',
        plateNumber: item.car_plate || '',
        registerDate: item.driving_license_register_date || '',
        carType: '',
        axleCount: item.driving_license_vehicle_axles || '',
        idCardFront: withStaticPrefix(item.id_card_front_img),
        idCardBack: withStaticPrefix(item.id_card_back_img),
        licenseFront: withStaticPrefix(item.driver_license_front_img),
        licenseBack: withStaticPrefix(item.driver_license_back_img),
        vehicleLicenseFront: withStaticPrefix(item.driving_license_front_img),
        vehicleLicenseBack: withStaticPrefix(item.driving_license_back_img),
        vehiclePhoto: withStaticPrefix(item.car_images),
      }));
      setData(mapped);
      setTotal(body?.data?.total ?? body?.total ?? 0);
      setCurrentPage(body?.data?.page ?? body?.page ?? page);
      setPageSize(body?.data?.page_size ?? body?.page_size ?? size);
    } catch (e: any) {
      MessagePlugin.error(e?.message || '获取已通过司机列表失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    // 首次加载
    fetchApproved();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 删除确认弹窗状态
  const [deleteDialogVisible, setDeleteDialogVisible] = useState(false);
  const [currentDeleteRow, setCurrentDeleteRow] = useState<Driver | null>(null);

  const handleAskDelete = (row: Driver) => {
    setCurrentDeleteRow(row);
    setDeleteDialogVisible(true);
  };

  const handleConfirmDelete = async () => {
    if (!currentDeleteRow) return;
    try {
      setLoading(true);
      await deleteDriver(String(currentDeleteRow.id));
      MessagePlugin.success('删除成功');
      setDeleteDialogVisible(false);
      setCurrentDeleteRow(null);
      // 如果当前页被删空且不是第一页，尝试回退一页
      const nextPage = data.length <= 1 && currentPage > 1 ? currentPage - 1 : currentPage;
      setCurrentPage(nextPage);
      await fetchApproved(nextPage, pageSize);
    } catch (e: any) {
      MessagePlugin.error(e?.message || '删除失败');
    } finally {
      setLoading(false);
    }
  };

  const handleCancelDelete = () => {
    setDeleteDialogVisible(false);
    setCurrentDeleteRow(null);
  };

  // 远端分页数据，直接用 data

  // 重置搜索
  const handleReset = () => {
    setSearchValue('');
    setPhoneSearchValue('');
    setLicenseSearchValue('');
    setLastQuery('');
    setCurrentPage(1);
    fetchApproved(1, pageSize, '');
  };

  return (
    <div style={{ padding: '24px' }}>
      <Card style={{ overflow: 'visible' }}>
        {/* 搜索和筛选区域 */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: '24px',
          marginBottom: '16px',
          padding: '12px 16px',
          backgroundColor: '#f8f9fa',
          borderRadius: '4px'
        }}>
          {/* 司机姓名 */}
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <span style={{ fontSize: '14px', color: '#666', whiteSpace: 'nowrap' }}>司机姓名</span>
            <Input
              placeholder="张三"
              value={searchValue}
              onChange={setSearchValue}
              style={{ width: '120px' }}
              size="small"
            />
          </div>

          {/* 手机号 */}
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <span style={{ fontSize: '14px', color: '#666', whiteSpace: 'nowrap' }}>手机号</span>
            <Input
              placeholder="123456789012"
              value={phoneSearchValue}
              onChange={setPhoneSearchValue}
              style={{ width: '140px' }}
              size="small"
            />
          </div>

          {/* 驾驶证号 */}
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <span style={{ fontSize: '14px', color: '#666', whiteSpace: 'nowrap' }}>驾驶证号</span>
            <Input
              placeholder="123456789012"
              value={licenseSearchValue}
              onChange={setLicenseSearchValue}
              style={{ width: '140px' }}
              size="small"
            />
          </div>

          {/* 操作按钮 */}
          <div style={{ display: 'flex', gap: '8px', marginLeft: 'auto' }}>
            <Button
              theme="primary"
              size="small"
              onClick={() => {
                const q = combinedSearch;
                setLastQuery(q);
                setCurrentPage(1);
                fetchApproved(1, pageSize, q);
              }}
            >
              查询
            </Button>
            <Button variant="outline" size="small" onClick={handleReset}>重置</Button>
          </div>
        </div>

        {/* 表格 - 按照原型图列顺序 */}
        <Table
          loading={loading}
          data={data}

          columns={[
            {
              colKey: 'index',
              title: '序号',
              width: 80,
              cell: ({ rowIndex }) => (currentPage - 1) * pageSize + rowIndex + 1
            },
            {
              colKey: 'driverName',
              title: '司机姓名',
              width: 100,
              cell: ({ row }) => (
                <span
                  style={{ color: '#0052d9', cursor: 'pointer' }}
                  onClick={() => openDetail(row)}
                >
                  {row.driverName}
                </span>
              )
            },
            {
              colKey: 'phone',
              title: '手机号',
              width: 120
            },
            {
              colKey: 'idNumber',
              title: '身份证号',
              width: 160
            },
            {
              colKey: 'idCardFront',
              title: '身份证正面照片',
              width: 140,
              cell: ({ row }) => (
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <PhotoThumbnail src={row.idCardFront} alt="身份证正面" />
                  <Button
                    variant="text"
                    style={{ color: '#0052d9' }}
                    onClick={() => handleImageView(row.idCardFront, '身份证正面照片')}
                  >
                    查看
                  </Button>
                </div>
              )
            },
            {
              colKey: 'idCardBack',
              title: '身份证反面照片',
              width: 140,
              cell: ({ row }) => (
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <PhotoThumbnail src={row.idCardBack} alt="身份证反面" />
                  <Button
                    variant="text"
                    style={{ color: '#0052d9' }}
                    onClick={() => handleImageView(row.idCardBack, '身份证反面照片')}
                  >
                    查看
                  </Button>
                </div>
              )
            },
            {
              colKey: 'licenseNumber',
              title: '驾驶证号',
              width: 140,
              cell: ({ row }) => row.licenseNumber
            },
            {
              colKey: 'licenseFront',
              title: '驾驶证正面照片',
              width: 140,
              cell: ({ row }) => (
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <PhotoThumbnail src={row.licenseFront} alt="驾驶证正面" />
                  <Button
                    variant="text"
                    style={{ color: '#0052d9' }}
                    onClick={() => handleImageView(row.licenseFront, '驾驶证正面照片')}
                  >
                    查看
                  </Button>
                </div>
              )
            },
            {
              colKey: 'licenseBack',
              title: '驾驶证反面照片',
              width: 140,
              cell: ({ row }) => (
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <PhotoThumbnail src={row.licenseBack} alt="驾驶证反面" />
                  <Button
                    variant="text"
                    style={{ color: '#0052d9' }}
                    onClick={() => handleImageView(row.licenseBack, '驾驶证反面照片')}
                  >
                    查看
                  </Button>
                </div>
              )
            },
            {
              colKey: 'vehicleLicenseFront',
              title: '行驶证正面照片',
              width: 140,
              cell: ({ row }) => (
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <PhotoThumbnail src={row.vehicleLicenseFront} alt="行驶证正面" />
                  <Button
                    variant="text"
                    style={{ color: '#0052d9' }}
                    onClick={() => handleImageView(row.vehicleLicenseFront, '行驶证正面照片')}
                  >
                    查看
                  </Button>
                </div>
              )
            },
            {
              colKey: 'vehicleLicenseBack',
              title: '行驶证反面照片',
              width: 140,
              cell: ({ row }) => (
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <PhotoThumbnail src={row.vehicleLicenseBack} alt="行驶证反面" />
                  <Button
                    variant="text"
                    style={{ color: '#0052d9' }}
                    onClick={() => handleImageView(row.vehicleLicenseBack, '行驶证反面照片')}
                  >
                    查看
                  </Button>
                </div>
              )
            },
            {
              colKey: 'vehicleType',
              title: '车型',
              width: 80
            },
            {
              colKey: 'vehicleSizeGroup',
              title: (
                <div style={{ textAlign: 'center' }}>车辆尺寸(米)</div>
              ),
              children: [
                {
                  colKey: 'vehicleLength',
                  title: '长度',
                  width: 80,
                  cell: ({ row }) => row.vehicleLength
                },
                {
                  colKey: 'vehicleWidth',
                  title: '宽度',
                  width: 80,
                  cell: ({ row }) => row.vehicleWidth
                },
                {
                  colKey: 'vehicleHeight',
                  title: '高度',
                  width: 80,
                  cell: ({ row }) => row.vehicleHeight
                }
              ]
            },
            {
              colKey: 'vehicleWeight',
              title: '载重吨数（吨）',
              width: 120,
              cell: ({ row }) => `${row.vehicleWeight}吨`
            },
            {
              colKey: 'maxWeight',
              title: '载重体积（方数）',
              width: 120,
              cell: ({ row }) => `${row.maxWeight}方`
            },
            {
              colKey: 'maxHeight',
              title: '最大限高（米）',
              width: 120,
              cell: ({ row }) => `${row.maxHeight}米`
            },
            {
              colKey: 'vehicleNumber',
              title: '车辆轴数',
              width: 100
            },
            {
              colKey: 'vehicleDescGroup',
              title: (
                <div style={{ textAlign: 'center' }}>车辆自述</div>
              ),
              children: [
                {
                  colKey: 'location',
                  title: '禁区/国际',
                  width: 100
                },
                {
                  colKey: 'loadingMethod',
                  title: '装卸方式',
                  width: 100
                },
                {
                  colKey: 'vehicleRequirement',
                  title: '车型要求',
                  width: 100
                }
              ]
            },
            {
              colKey: 'vehiclePhoto',
              title: '车辆照片',
              width: 140,
              cell: ({ row }) => (
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <PhotoThumbnail src={row.vehiclePhoto} alt="车辆照片" />
                  <Button
                    variant="text"
                    style={{ color: '#0052d9' }}
                    onClick={() => handleImageView(row.vehiclePhoto, '车辆照片')}
                  >
                    查看
                  </Button>
                </div>
              )
            },
            {
              colKey: 'plateNumber',
              title: '车牌号',
              width: 100
            },
            {
              colKey: 'registerDate',
              title: '注册日期',
              width: 120
            },
            {
              colKey: 'operation',
              title: '操作',
              width: 120,
              fixed: 'right',
              cell: ({ row }) => (
                <Space>
                  <Button size="small" variant="text" style={{ color: '#0052d9' }} onClick={() => openEdit(row)}>
                    编辑
                  </Button>
                  <Button size="small" variant="text" style={{ color: '#0052d9' }} onClick={() => handleAskDelete(row)}>
                    删除
                  </Button>
                </Space>
              )
            }
          ]}
          rowKey="id"
          bordered
          hover
          size="small"
        />

        {/* 分页 */}
        <div style={{
          display: 'flex',
          justifyContent: 'flex-end',
          alignItems: 'center',
          marginTop: '24px'
        }}>
          <Pagination
            current={currentPage}
            total={total}
            pageSize={pageSize}
            onChange={(pageInfo) => {
              const nextPage = pageInfo.current;
              const nextSize = pageInfo.pageSize || pageSize;
              setCurrentPage(nextPage);
              setPageSize(nextSize);
              fetchApproved(nextPage, nextSize);
            }}
          />
        </div>

        {/* 查看详情弹窗 */}
        <Dialog
          visible={detailDialogVisible}
          header={<span>查看详情</span>}
          onClose={closeDetail}
          width="720px"
          footer={
            <Space>
              <Button size="small" onClick={() => { if (currentDetailRow) { handleAskDelete(currentDetailRow); } }}>
                删除
              </Button>
              <Button size="small" theme="primary" onClick={() => { if (currentDetailRow) { openEdit(currentDetailRow); } }}>
                编辑
              </Button>
            </Space>
          }
        >
          {currentDetailRow && (
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: '1fr 1fr',
                columnGap: 32,
                rowGap: 12,
                padding: '8px 0'
              }}
            >
              {/* 左右两列字段，1:1 复刻布局 */}
              <div>
                <div style={{ display: 'flex', alignItems: 'center', minHeight: 22 }}>
                  <span style={{ width: 88, color: '#8a8a8a', fontSize: 12 }}>司机姓名：</span>
                  <span style={{ flex: 1, color: '#2f2f2f', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{currentDetailRow.driverName}</span>
                </div>
              </div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', minHeight: 22 }}>
                  <span style={{ width: 88, color: '#8a8a8a', fontSize: 12 }}>手机号：</span>
                  <span style={{ flex: 1, color: '#2f2f2f' }}>{currentDetailRow.phone}</span>
                </div>
              </div>

              <div>
                <div style={{ display: 'flex', alignItems: 'center', minHeight: 22 }}>
                  <span style={{ width: 88, color: '#8a8a8a', fontSize: 12 }}>身份证号：</span>
                  <span style={{ flex: 1, color: '#2f2f2f', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{currentDetailRow.idNumber}</span>
                </div>
              </div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', minHeight: 22 }}>
                  <span style={{ width: 88, color: '#8a8a8a', fontSize: 12 }}>驾驶证号：</span>
                  <span style={{ flex: 1, color: '#2f2f2f', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{currentDetailRow.idNumber}</span>
                </div>
              </div>

              <div>
                <div style={{ display: 'flex', alignItems: 'center', minHeight: 22 }}>
                  <span style={{ width: 88, color: '#8a8a8a', fontSize: 12 }}>行驶证号：</span>
                  <span style={{ flex: 1, color: '#2f2f2f', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{currentDetailRow.idNumber}</span>
                </div>
              </div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', minHeight: 22 }}>
                  <span style={{ width: 88, color: '#8a8a8a', fontSize: 12 }}>车牌号：</span>
                  <span style={{ flex: 1, color: '#2f2f2f' }}>{currentDetailRow.plateNumber}</span>
                </div>
              </div>

              <div>
                <div style={{ display: 'flex', alignItems: 'center', minHeight: 22 }}>
                  <span style={{ width: 88, color: '#8a8a8a', fontSize: 12 }}>车型：</span>
                  <span style={{ flex: 1, color: '#2f2f2f' }}>{currentDetailRow.vehicleType}</span>
                </div>
              </div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', minHeight: 22 }}>
                  <span style={{ width: 88, color: '#8a8a8a', fontSize: 12 }}>车辆长宽高：</span>
                  <span style={{ flex: 1, color: '#2f2f2f' }}>
                    {`${currentDetailRow.vehicleLength.toFixed(2)}–${currentDetailRow.vehicleWidth.toFixed(2)}–${currentDetailRow.vehicleHeight.toFixed(2)}米`}
                  </span>
                </div>
              </div>

              <div>
                <div style={{ display: 'flex', alignItems: 'center', minHeight: 22 }}>
                  <span style={{ width: 88, color: '#8a8a8a', fontSize: 12 }}>载重吨数：</span>
                  <span style={{ flex: 1, color: '#2f2f2f' }}>{`${currentDetailRow.vehicleWeight}吨`}</span>
                </div>
              </div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', minHeight: 22 }}>
                  <span style={{ width: 88, color: '#8a8a8a', fontSize: 12 }}>载重体积：</span>
                  <span style={{ flex: 1, color: '#2f2f2f' }}>{`${currentDetailRow.maxWeight}立方米`}</span>
                </div>
              </div>

              <div>
                <div style={{ display: 'flex', alignItems: 'center', minHeight: 22 }}>
                  <span style={{ width: 88, color: '#8a8a8a', fontSize: 12 }}>最大限高：</span>
                  <span style={{ flex: 1, color: '#2f2f2f' }}>{`${currentDetailRow.maxHeight}米`}</span>
                </div>
              </div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', minHeight: 22 }}>
                  <span style={{ width: 88, color: '#8a8a8a', fontSize: 12 }}>车辆轴数：</span>
                  <span style={{ flex: 1, color: '#2f2f2f' }}>{currentDetailRow.vehicleNumber}</span>
                </div>
              </div>

              <div>
                <div style={{ display: 'flex', alignItems: 'center', minHeight: 22 }}>
                  <span style={{ width: 88, color: '#8a8a8a', fontSize: 12 }}>禁区/国际：</span>
                  <span style={{ flex: 1, color: '#2f2f2f' }}>{currentDetailRow.location}</span>
                </div>
              </div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', minHeight: 22 }}>
                  <span style={{ width: 88, color: '#8a8a8a', fontSize: 12 }}>装卸方式：</span>
                  <span style={{ flex: 1, color: '#2f2f2f' }}>{currentDetailRow.loadingMethod}</span>
                </div>
              </div>

              <div>
                <div style={{ display: 'flex', alignItems: 'center', minHeight: 22 }}>
                  <span style={{ width: 88, color: '#8a8a8a', fontSize: 12 }}>车型要求：</span>
                  <span style={{ flex: 1, color: '#2f2f2f' }}>{currentDetailRow.vehicleRequirement}</span>
                </div>
              </div>
            </div>
          )}
        </Dialog>

        {/* 删除确认弹窗 */}
        <Dialog
          visible={deleteDialogVisible}
          header={
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span>删除</span>
            </div>
          }
          onClose={handleCancelDelete}
          onCancel={handleCancelDelete}
          onConfirm={handleConfirmDelete}
          confirmBtn={{ theme: 'primary', content: '确认删除' }}
          cancelBtn={{ theme: 'default', content: '取消' }}
        >
          <div style={{ paddingTop: 8 }}>是否确认删除？</div>
        </Dialog>

        {/* 编辑弹窗 */}
        <Dialog
          visible={editDialogVisible}
          header={<span>编辑</span>}
          onClose={handleEditCancel}
          onCancel={handleEditCancel}
          onConfirm={handleEditConfirm}
          confirmBtn={{ theme: 'primary', content: '确认' }}
          cancelBtn={{ theme: 'default', content: '取消' }}
          width="680px"
        >
          <div
            style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: '12px 20px',
            }}
          >
            {/* 左列 */}
            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>司机姓名</div>
              <Input value={editForm.driverName} disabled size="small" style={{ height: 28 }} />
            </div>
            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>手机号</div>
              <Input value={editForm.phone} disabled size="small" style={{ height: 28 }} />
            </div>

            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>身份证号</div>
              <Input value={editForm.idNumber} disabled size="small" style={{ height: 28 }} />
            </div>
            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>驾驶证号</div>
              <Input value={editForm.licenseNumber} disabled size="small" style={{ height: 28 }} />
            </div>

            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>行驶证号</div>
              <Input value={editForm.vehicleLicenseNumber} disabled size="small" style={{ height: 28 }} />
            </div>
            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>车牌号</div>
              <Input value={editForm.plateNumber} disabled size="small" style={{ height: 28 }} />
            </div>

            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>车型</div>
              <Input value={editForm.vehicleType} onChange={(v) => handleEditChange('vehicleType', v)} size="small" style={{ height: 28 }} />
            </div>
            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>车辆长度（米）</div>
              <Input value={editForm.vehicleLength} onChange={(v) => handleEditChange('vehicleLength', v)} size="small" style={{ height: 28 }} />
            </div>

            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>车辆宽度（米）</div>
              <Input value={editForm.vehicleWidth} onChange={(v) => handleEditChange('vehicleWidth', v)} size="small" style={{ height: 28 }} />
            </div>
            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>车辆高度（米）</div>
              <Input value={editForm.vehicleHeight} onChange={(v) => handleEditChange('vehicleHeight', v)} size="small" style={{ height: 28 }} />
            </div>

            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>载重吨数（吨）</div>
              <Input value={editForm.vehicleWeight} onChange={(v) => handleEditChange('vehicleWeight', v)} size="small" style={{ height: 28 }} />
            </div>
            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>载重体积（方数）</div>
              <Input value={editForm.maxWeight} onChange={(v) => handleEditChange('maxWeight', v)} size="small" style={{ height: 28 }} />
            </div>

            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>最大限高（米）</div>
              <Input value={editForm.maxHeight} onChange={(v) => handleEditChange('maxHeight', v)} size="small" style={{ height: 28 }} />
            </div>
            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>车辆轴数</div>
              <Input value={editForm.vehicleNumber} onChange={(v) => handleEditChange('vehicleNumber', v)} size="small" style={{ height: 28 }} />
            </div>

            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>禁区/国际</div>
              <Input value={editForm.location} onChange={(v) => handleEditChange('location', v)} size="small" style={{ height: 28 }} />
            </div>
            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>装卸方式</div>
              <Input value={editForm.loadingMethod} onChange={(v) => handleEditChange('loadingMethod', v)} size="small" style={{ height: 28 }} />
            </div>

            <div>
              <div style={{ fontSize: 12, color: '#8a8a8a', marginBottom: 4 }}>车型要求</div>
              <Input value={editForm.vehicleRequirement} onChange={(v) => handleEditChange('vehicleRequirement', v)} size="small" style={{ height: 28 }} />
            </div>
          </div>
        </Dialog>

        {/* 图片查看弹窗 */}
        <Dialog
          visible={imageDialogVisible}
          header={currentImage.title}
          onClose={() => setImageDialogVisible(false)}
          width="600px"
          footer={false}
        >
          <div style={{ textAlign: 'center' }}>
            <img
              src={currentImage.src}
              alt={currentImage.title}
              style={{
                maxWidth: '100%',
                maxHeight: '400px',
                objectFit: 'contain'
              }}
              onError={(e) => {
                const target = e.target as HTMLImageElement;
                target.src = defaultPhotoUrl;
              }}
            />
          </div>
        </Dialog>
      </Card>
    </div>
  );
};

export default DriverListPage;